<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
Vue.set( target, propertyName/index, value )
参数：
    {Object | Array} target
    {string | number} propertyName/index
    {any} value
返回值：设置的值。

用法：
    向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
    它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')
-->
<div id="app">
    <h1>姓名：{{person.name}}</h1>
    <h1>年龄：{{person.age}}</h1>
    <h1>性别：{{person.sex}}</h1>
    <h1>地址：{{person.address}}</h1>

    <button @click="add">添加一个属性</button>
</div>
<script src="../JavaScript/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            person:{
                name:"陶品奇",
                age:18,
            }
        },
        methods:{
            add(){
                // this.person.sex="男"
                Vue.set(this.person,"sex","男")
                this.$set(this.person,"address","衡阳")

            }
        }
    })
</script>
</body>
</html>
